<template>
  <div class="home-page">
    <SwipeImage :imgs="banners" />

    <feature-group class="mb10" :data="featureList" @click="toPage" />
    <block-card v-if="lesson.title" title="健康科普">
      <article-card
        v-bind="lesson"
        size="large"
        @click="toPage('detail', lesson.id, 'lesson')"
      />
    </block-card>

    <block-card v-if="knowledge.title" title="营养处方">
      <article-card
        v-bind="knowledge"
        size="large"
        @click="toPage('detail', knowledge.id, 'knowledge')"
      />
    </block-card>
  </div>
</template>

<script>
import Taro from "@tarojs/taro";
import { getArticles, getVideo } from "./api";
import { getListByPage } from "../moment/api";
import SwipeImage from "./components/SwipeImage.vue";
import BlockCard from "./components/BlockCard.vue";
import ArticleCard from "@/components/ArticleCard.vue";
import { mapGetters } from "vuex";
import { Button } from "vant";
import FeatureGroup from "./components/FeatureGroup.vue";
export default {
  components: {
    SwipeImage,
    BlockCard,
    ArticleCard,
    FeatureGroup,
    [Button.name]: Button
  },
  data() {
    return {
      banners: [
        {
          pic: require("./imgs/brain.png")
        },
        {
          pic: require("./imgs/daily.png")
        }
      ],
      featureList: [
        {
          title: "健康科普",
          icon: require("@/assets/images/home/action.png"),
          url: "lesson/index",
          type: 1
        },
        {
          title: "抗阻运动指导",
          icon: require("@/assets/images/home/lesson.png"),
          url: "lesson/index",
          type: 2
        },
        {
          title: "居家自查",
          icon: require("@/assets/images/home/daily.png"),
          url: "examdetail/index"
        },
        {
          title: "我的测评",
          icon: require("@/assets/images/home/exam.png"),
          url: "exam/index"
        },
        {
          title: "营养处方",
          icon: require("@/assets/images/home/moments.png"),
          url: "knowledge/videoList",
          type: 1
        },
        {
          title: "快问快答",
          icon: require("@/assets/images/home/mine.png"),
          url: "knowledge/index",
          type: 2
        }
      ],

      lesson: {
        name: ""
      },
      knowledge: {
        name: ""
      }
    };
  },
  computed: {
    ...mapGetters(["user"])
  },
  onShareAppMessage() {
    return {
      path: "/pages/loading/index"
    };
  },
  onLoad() {
    if (this.user.audit === 0) {
      Taro.hideTabBar();
    }
    Taro.hideHomeButton();

    this.getArticles();
    this.getKnowledge();
  },
  methods: {
    async getArticles() {
      const data = await getArticles({ type: 1 });
      this.lesson = data[0] || {};
    },
    async getKnowledge() {
      const data = await getVideo({ type: 1 });
      this.knowledge = data[0] || {};
    },

    toPage(item, id, type) {
      let query = "";
      if (id) {
        query = `id=${id}&type=${type}`;
      }
      if (typeof item === "string") {
        item = { url: item };
      } else if (item.type) {
        query = "type=" + item.type + "&title=" + item.title;
      }
      Taro.navigateTo({
        url: `/pages/${item.url}?${query}`
      });
    }
  }
};
</script>

<style lang="less">
@import "./index.less";
</style>
